<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-sys__menu">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <el-form-item>
          <el-button v-if="$hasPermission('menu:add')" icon="el-icon-circle-plus-outline" size="mini" type="primary" @click="save()">{{ $t('add') }}</el-button>
        </el-form-item>
		
		<el-form-item>
		  <el-button  icon="el-icon-refresh" size="mini" type="primary" @click="getDataList()">{{ $t('menu.list') }}</el-button>
		</el-form-item>
		
		<el-form-item>
		  <el-button  size="mini" icon="el-icon-s-operation" type="primary" @click="editShowAll()">{{this.showAllName}}</el-button>
		</el-form-item>
      </el-form>
      <el-table v-loading="dataListLoading" :data="dataList" v-if="menuTable" :default-expand-all="showAll" row-key="id" border style="width: 100%;">
        <el-table-column prop="name" :label="$t('menu.name')" header-align="center" min-width="150"></el-table-column>
		<el-table-column prop="code" :label="$t('menu.permissions')" header-align="center" align="center" width="160" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="menuUrl" :label="$t('menu.url')" header-align="center" align="center" width="160" :show-overflow-tooltip="true" ></el-table-column>
        <el-table-column prop="isMenu" :label="$t('menu.type')" header-align="center" align="center" min-width="40">
          <template slot-scope="scope">
            <el-tag  v-if="scope.row.isMenu === 0" size="small">{{ $t('menu.type0') }}</el-tag>
            <el-tag  v-else size="small" type="success">{{ $t('menu.type1') }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="menuRank" :label="$t('menu.sort')" header-align="center" align="center" min-width="40"></el-table-column>
        
       <el-table-column prop="icon" :label="$t('menu.icon')" header-align="center" align="center" min-width="40">
         <template slot-scope="scope">
           <svg class="icon-svg" aria-hidden="true"><use :xlink:href="`#${scope.row.icon}`"></use></svg>
         </template>
       </el-table-column>
		<el-table-column  :label="$t('handle')" fixed="right" header-align="center" align="center" width="160">
          <template slot-scope="scope">
			  <el-button v-if="$hasPermission('menu:add') && scope.row.isMenu === 1" type="text" size="small" @click="addChild(scope.row)">{{ $t('add') }}</el-button>
			<el-button v-if="$hasPermission('menu:move')" type="text" size="small" @click="showMoveBox(scope.row)">{{ $t('menu.move') }}</el-button>
            <el-button v-if="$hasPermission('menu:modify')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
            <el-button v-if="$hasPermission('menu:del')" type="text" size="small" @click="delHandle(scope.row.id)">{{ $t('delete') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update :pid="this.ppid" :pidname="this.ppidname" v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './menu-add-or-update'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
		menuTable:true,
		showAll:false,
		showAllName: '展开菜单',
		ppid: null,
		ppidname: null,
      mixinViewModuleOptions: {
        getDataListURL: '/pc/menu/getAllMenu',
        deleteURL: '/pc/menu/del'
      }
    }
  },
  components: {
    AddOrUpdate
  },
  watch: {
      showAll() {
        this.menuTable = false;
        this.$nextTick(() => {
          this.menuTable = true;
        });
      },
    },
  
  methods:{
	  refresh(){
		  return this.$http.post('/pc/menu/refresh').then(({ data: res }) => {
		    if (res.code !== 200) {
		      return this.$message.error(res.msg)
		    }
			return this.$message.success(res.msg)
		  }).catch(() => {})
	  }
	  
	  ,editShowAll(){
		  this.showAll = !this.showAll;
		  this.showAllName = this.showAll ? '折叠菜单' : '展开菜单'
	  },
	  
	  addChild(d){
		   //设置需要给子级的参数
		   this.ppid = d.id;
		   this.ppidname = d.name;
		   this.addOrUpdateHandle();	
	  },
	  
	  save(){
		 this.ppid = null;
		 this.ppidname = null;
		 this.addOrUpdateHandle();	 
	  },
	  
	  showMoveBox(obj) {
		var params = {
			id: obj.id,
			moveType: null
		}
		// alert(JSON.stringify(obj))
		var moveIsMenu  =  obj.isMenu === 1 ? this.$t('menu.type1')  :  this.$t('menu.type0')  
		var msg = '是否移动  “' + obj.name + '”  ' + moveIsMenu +  '?'
		
		  this.$confirm(msg, '提示', {
			distinguishCancelAndClose: true,
			confirmButtonText: '下移',
			cancelButtonText: '上移',
			type: 'warning'
		  }).then(() => {
			  params.moveType = 0
			  this.doMove(params)
		  }).catch((action) => {
			  if( action === 'cancel' ){
				  params.moveType = 1
				  this.doMove(params)
			  }else{
				  params.moveType = null;
				  params.id = null;
				  this.$message.info('取消移动')
			  }
			 
		  });
		}
		,doMove(params){
			this.$http.post('/pc/menu/move',params).then(({ data: res }) => {
			  if (res.code !== 200) {
			    return this.$message.error(res.msg)
			  }
			  this.getDataList();
			return this.$message.success(res.msg)
			
			}).catch(() => {})
		}
	 
  }
}
</script>
